<template>
    <div class="middle-main" style="height:100%">
        <!-- <div class="query-content">
          <div class="query-search">
            <el-form :inline="true" :model="state.formInline" class="demo-form-inline">
              <el-form-item label="" style="width: 205px;margin-right: 10px;">
                <el-date-picker
                  v-model="state.formInline.date"
                  type="daterange"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  clearable
                   
                />
              </el-form-item>

              <el-form-item style="width: 360px;margin-right: 10px;">
                <el-input
                    v-model="state.formInline.text"
                    placeholder="请输入标准名称或编号"
                     
                    >
                    <template #prepend>
                        <el-select   v-model="state.formInline.key" style="width: 115px">
                        <el-option label="标准搜索" :value="1" />
                        <el-option label="条文检索" :value="2" />
                        <el-option label="术语检索" :value="3" />
                        </el-select>
                    </template>
                    <template #append>
                        <el-button :icon="Search" @click="onSubmit"/>
                    </template>
                </el-input>
              </el-form-item>
            </el-form>
          </div>
          <div class="query-btn">
            <el-button type="primary"   @click="onReset">重置</el-button>
          </div>
        </div> -->
        <div class="table-main" style="height:100%">
            <el-table
                :data="dataList"
                :default-sort="{ prop: 'date', order: 'descending' }"
                style="width: 100%;height:100%"
                :border="true"
            >
                <el-table-column fixed prop="standardName" label="标准名称" align="center"/>
                <el-table-column prop="standardNumber" label="标准编号"  align="center"/>
                <el-table-column prop="publishTime" label="发布日期" align="center"/>
                <el-table-column prop="implementTime" label="实施日期" align="center"/>
                <el-table-column label="操作" header-align="center" align="center">
                    <template #default="scope">
                        <el-button type="primary" link @click="detailRecord(scope.row)">详细信息</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-content">
                <el-config-provider :locale="zhCn">
                    <el-pagination
                    v-model:current-page="state.pageNum"
                    v-model:page-size="state.pageSize"
                    :page-sizes="[10, 20, 30, 100]"
                    background
                    layout="sizes, prev, pager, next, jumper"
                    :total="state.total"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    />
                </el-config-provider>
            </div>
        </div>

    </div>
</template>
<script setup lang="ts">
    import { ref, reactive, PropType } from 'vue'
    import { Search } from '@element-plus/icons-vue'
    import { ElConfigProvider } from 'element-plus'
    import zhCn from 'element-plus/es/locale/lang/zh-cn';
    // 表格数据 父亲给孩子
    // 查询数据  孩子给父亲---结果给表格数据list
    // 表格排序
    // 查询 重置
    const props = defineProps({
        title: {
            type: String,
            default: ''
        },
        dataList: {
            type: Array as PropType<any[]>,
            default: () => []
        }
    })
    const emit = defineEmits(['querylist', 'detaillist'])
    const state = reactive({
        formInline: {
            text: '',
            key: 1,
            date: '',
        },
        pageNum: 1,
        pageSize: 10,
        total: 1,
        dataListLoading: false
    })
    
    const onSubmit = () => {
        console.log('submit!')
        emit('querylist', {})
    }
    const onReset = () => {
        console.log('onReset!')
        emit('querylist', {})
    }
    const handleSizeChange = (val: number) => {
        console.log(`${val} items per page`)
    }
    const handleCurrentChange = (val: number) => {
        console.log(`current page: ${val}`)
    }
    const detailRecord = (val: any) => {
        // console.log('detailRecord', val)
        emit('detaillist', val.id)
    }

</script>
<style lang="scss" scoped>
.query-content {
    display: flex;
    justify-content: space-between
}

.query-btn {
    min-width: 76px;
}

.pagination-content {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}
</style>
